<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="t" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>


<div class="row-fluid">
    <div class="row-fluid">

        <sf:form method="POST" class="form-horizontal" modelAttribute="pessoaForm" action="save">

            <sf:hidden  path="id"/>

            <fieldset>
                <legend>Informações Gerais</legend>

            <div class="control-group">
                <label class="control-label" for="organizacaoId">Organização</label>
                <div class="controls">

                    <sf:select cssClass="chzn-select" path="organizacaoId" data-placeholder="Escolha uma Organização...">
                        <sf:option value="0">&nbsp;</sf:option>
                        <c:forEach var="organizacao" items="${organizacoes}">

                            <sf:option value="${organizacao.id}">${organizacao.sigla}</sf:option>
                        </c:forEach>
                    </sf:select>
                </div>
            </div>

            <div class="control-group">
                <sf:label cssClass="control-label" path="nome">Nome</sf:label>

                    <div class="controls">
                    <sf:input path="nome" placeholder="Nome" /><br/>
                    <sf:errors path="nome" cssClass="text-error" />

                </div>
            </div>
            <div class="control-group">
                <sf:label cssClass="control-label" path="nomeGuerra">Nome de Guerra</sf:label>

                    <div class="controls">
                    <sf:input path="nomeGuerra" placeholder="Nome de Guerra" /><br/>
                    <sf:errors path="nomeGuerra" cssClass="text-error" />

                </div>
            </div>
            <div class="control-group">
                <sf:label cssClass="control-label" path="posto">Posto</sf:label>

                    <div class="controls">
                    <sf:input path="posto" placeholder="Posto" /><br/>
                    <sf:errors path="posto" cssClass="text-error" />

                </div>
            </div>
            <div class="control-group">
                <sf:label cssClass="control-label" path="quadro">Quadro</sf:label>

                    <div class="controls">
                    <sf:input path="quadro" placeholder="Quadro" /><br/>
                    <sf:errors path="quadro" cssClass="text-error" />

                </div>
            </div>

            <div class="control-group">
                <sf:label cssClass="control-label" path="especialidade">Especialidade</sf:label>

                    <div class="controls">
                    <sf:input path="especialidade" placeholder="Especialidade" /><br/>
                    <sf:errors path="especialidade" cssClass="text-error" />

                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="dataNascimento">Data de Nascimento</label>
                <div class="controls">
                    <sf:input path="dataNascimento" cssClass="input-small input-mask-date"/>        
                    <br/>
                    <sf:errors path="dataNascimento" cssClass="text-error" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="dataPraca">Data de Praça</label>
                <div class="controls">
                    <sf:input path="dataPraca" cssClass="input-small input-mask-date"/>        
                    <br/>
                    <sf:errors path="dataPraca" cssClass="text-error" />
                </div>
            </div>

            <div class="control-group">
                <sf:label cssClass="control-label" path="identidade">Identidade</sf:label>

                    <div class="controls">
                    <sf:input path="identidade" placeholder="Identidade" /><br/>
                    <sf:errors path="identidade" cssClass="text-error" />

                </div>
            </div>

            <div class="control-group">
                <sf:label cssClass="control-label" path="cpf">CPF</sf:label>

                    <div class="controls">
                    <sf:input path="cpf" placeholder="CPF" cssClass="input-mask-cpf" /><br/>
                    <sf:errors path="cpf" cssClass="text-error" />

                </div>
            </div>
            <div class="control-group">
                <sf:label cssClass="control-label" path="saram">SARAM</sf:label>

                    <div class="controls">
                    <sf:input path="saram" placeholder="SARAM" cssClass=" input-mask-saram" /><br/>
                    <sf:errors path="saram" cssClass="text-error" />

                </div>
            </div>
    </fieldset>
            <fieldset>
                <legend>Emails</legend>
                <div class="control-group">
                    <label class="control-label" for="emails-container"></label>
                    <div class="controls">
                        <div id="periodo-container" class="form-inline span4">
                            <table  id="emails-table">

                                <c:forEach var="email" items="${emails}">
                                    <tr>
                                        <td>
                                            <input id="email" name="email" type="text" placeholder="Email" value="${email.address}"/>
                                            <button type="button" onclick="removeEmailRow()" class="btn btn-minier btn-danger delete-link"><i class="icon-trash"></i></button>
                                        </td>
                                    </tr>
                                </c:forEach>


                            </table>
                            <br/>
                            <button type="button" onclick="addEmail()" class="btn btn-success"><i class="icon-plus"></i>Adicionar Email</button>    

                        </div>
                    </div>
                </div>

            </fieldset>
            <fieldset>
                <legend>Telefones</legend>
                <div class="control-group">
                    <label class="control-label" for="telefones-container"></label>
                    <div class="controls">
                        <div id="periodo-container" class="form-inline">
                            <table  id="telefones-table">

                                <c:forEach var="telefone" items="${telefones}">
                                    <tr>
                                        <td>
                                            <input id="telefone" class="input-mask-phone" name="telefone" type="text" placeholder="Telefone" value="${telefone.numero}"/>
                                            <button type="button" onclick="removeTelefoneRow()" class="btn btn-minier btn-danger delete-link"><i class="icon-trash"></i></button>
                                        </td>
                                    </tr>
                                </c:forEach>


                            </table>
                            <br/>
                            <button type="button" onclick="addTelefone()" class="btn btn-success"><i class="icon-plus"></i>Adicionar Telefone</button>    

                        </div>
                    </div>
                </div>

            </fieldset>


            <div class="form-actions">

                <button class="btn btn-info" type="submit">
                    <i class="icon-ok bigger-110"></i>
                    Gravar
                </button>



                &nbsp; &nbsp; &nbsp;
                <a class="btn" href="javascript:back()">
                    <i class="icon-undo bigger-110"></i>
                    Voltar
                </a>
            </div>


        </sf:form>

    </div>



    <!--inline scripts related to this page-->

    <script type="text/javascript">
                                                var firstEmailRow = $('#emails-table tr:last').clone()
                                                

                                                function addEmail() {

                                                    // if table vazia
                                                    var rowCount = $('#emails-table tr').length;
                                                    if (rowCount == 1) {
                                                        $('#emails-table tr:last').after(firstEmailRow);
                                                    } else {
                                                        $('#emails-table tr:last').after($('#emails-table tr:last').clone());
                                                    }

                                                }

                                                // Remove button functionality
                                                $(document).on("click", "#emails-table button.delete-link", function() {
                                                    var rowCount = $('#emails-table tr').length;
                                                    if (rowCount > 2) {
                                                        $(this).parents("tr").remove();
                                                    }
                                                    if (rowCount == 2) {
                                                        $(this).parents("tr").remove();
                                                        addRow();
                                                    }
                                                });


                                                var firstTelefoneRow = $('#telefones-table tr:last').clone()

                                                function addTelefone() {

                                                    // if table vazia
                                                    var rowCount = $('#telefones-table tr').length;
                                                    if (rowCount == 1) {
                                                        $('#telefones-table tr:last').after(firstTelefoneRow);
                                                    } else {
                                                        $('#telefones-table tr:last').after($('#telefones-table tr:last').clone());
                                                    }


                                                    $('.input-mask-phone').mask('(99) 9999-9999');

                                                }

                                                // Remove button functionality
                                                $(document).on("click", "#telefones-table button.delete-link", function() {
                                                    var rowCount = $('#telefones-table tr').length;
                                                    if (rowCount > 2) {
                                                        $(this).parents("tr").remove();
                                                    }
                                                    if (rowCount == 2) {
                                                        $(this).parents("tr").remove();
                                                        addRow();
                                                    }
                                                });




                                                $(function() {
                                                    $(".chzn-select").chosen();
                                                    $(".chzn-select-deselect").chosen({allow_single_deselect: true});
                                                    $.mask.definitions['~'] = '[+-]';
                                                    $('.input-mask-date').mask('99/99/9999');
                                                    $('.input-mask-cpf').mask('999.999.999-99');
                                                    $('.input-mask-saram').mask('999.999-9');
                                                    $('.input-mask-phone').mask('(99) 9999-9999');
                                                });
    </script>